<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <title>美食推荐</title>
    <jsp:include page="../../../includes/header.jsp"/>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">

<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../../../includes/top_navigation_reception.jsp"/>

    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>
                <h1>
                    美食推荐
                    <small>最新发布</small>
                </h1>
            </section>
            <br>
            <section class="content">

                <div class="row">
                    <div class="layui-form" style="padding-bottom: 20px">
                        <div class="layui-input-wrap">
                            <input id="searchInput" type="text" style="border-radius: 8px" lay-affix="search"
                                   lay-filter="search" lay-options="{split: true}"
                                   placeholder="搜索…" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-primary demo-dropdown-base">
                            <span id="ByName">人气</span>
                            <i class="layui-icon layui-icon-down layui-font-12"></i>
                        </button>
                    </div>
                    <c:forEach items="${foodList}" var="food">
                        <div class="layui-panel">
                            <a href="/food/content?id=${food.id}">
                                <div style="padding: 32px;">
                                    <div style="display: flex; justify-content: flex-start;">
                                        <img src="${food.imgUrl}" style="width: 100px; height: 100px;"/>
                                        <div style="margin-left: 20px">
                                            <h3>${food.title}</h3>
                                            <div class="class-test-rate"
                                                 lay-options="{value: ${food.score}}"></div>
                                            <div style="padding-top: 5px">${food.address}</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </c:forEach>

                </div>
                <br>
                <!-- /.container -->
        </div>
        <!-- /.content-wrapper -->
    </div>
    <%--版权--%>
    <jsp:include page="../../../includes/copyright.jsp"/>
    <!-- ./wrapper -->
    <%--js--%>
    <jsp:include page="../../../includes/footer.jsp"/>
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 获取URL的查询字符串部分
            const queryString = window.location.search;

            // 使用URLSearchParams解析查询字符串
            const urlParams = new URLSearchParams(queryString);

            // 获取名为'search'的查询参数的值
            const searchValue = urlParams.get('title');

            // 如果存在'search'查询参数，则将其值赋给输入框
            if (searchValue) {
                document.getElementById('searchInput').value = searchValue;
            }
        });
        layui.use(function () {
            var dropdown = layui.dropdown;
            // 渲染
            dropdown.render({
                elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
                data: [{
                    title: '人气',
                    data: "heat"
                }, {
                    title: '评论数',
                    data: "comment"
                }],
                click: function (obj) {
                    // 获取跳转链接
                    // 执行页面跳转
                    window.location.href = "${pageContext.request.contextPath}/food/index?orderBy=" + obj.data + "&ByName=" + obj.title;
                }
            });
            var form = layui.form;
            var rate = layui.rate;
            rate.render({
                elem: '.class-test-rate',
                readonly: true
            });
            // 输入框点缀事件 - 搜索示例
            form.on('input-affix(search)', function (data) {
                var elem = data.elem; // 输入框
                var value = elem.value; // 输入框的值
                // 模拟搜索跳转
                location.href = '?title=' + value;
            });
        });
    </script>
    <script>
        // 获取 URL 参数的函数
        function getUrlParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 获取名为 category 的参数值
        var categoryValue = getUrlParam('ByName');
        if (categoryValue != null) {
            // 将参数值设置为 span 元素的文本内容
            document.getElementById('ByName').innerText = categoryValue;
        }

    </script>

</body>
</html>